﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Gallery.master" AutoEventWireup="true"
    CodeFile="Details.aspx.cs" Inherits="_Details" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadAjaxManager runat="server" ID="ajaxManagerDetailsPage">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rotatorImagesList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="binaryImageFullImage" />
                    <telerik:AjaxUpdatedControl ControlID="panelImageData" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <%--START DETAILS PAGE WRAPPER--%>
    <div class="galMainContent">
        <%--START LEFT CONTENT WRAPPER--%>
        <div class="galLeftContent">
            <%--START ROTATOR--%>
            <div class="galRotator">
                <telerik:RadRotator runat="server" ID="rotatorImagesList" RotatorType="Buttons" Width="645px"
                    Height="89px" ItemWidth="83px" ItemHeight="83px" WrapFrames="false" OnClientItemClicked="toggleSelectedItem"
                    OnItemClick="rotatorImagesList_SelectImage" OnItemDataBound="rotatorImagesList_ToggleSelectedPhoto">
                    <ItemTemplate>
                        <telerik:RadBinaryImage runat="server" ID="binaryImageThumbnail" Width="83px" Height="83px"
                            ResizeMode="Crop" DataValue='<%# DataBinder.Eval(Container.DataItem,"Data") %>' />
                        <asp:HiddenField ID="hiddenFieldPhotoIdContainer" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"PhotoID") %>' />
                    </ItemTemplate>
                </telerik:RadRotator>
            </div>
            <%--END ROTATOR--%>
            <%--START IMAGE WRAPPER--%>
            <div class="galImgCont">
                <%--ACTUAL IMAGE--%>
                <div class="galImgWrapper">
                    <telerik:RadBinaryImage runat="server" ID="binaryImageFullImage" />
                </div>
            </div>
            <%--END IMAGE WRAPPER--%>
        </div>
        <%--END LEFT CONTENT WRAPPER--%>
        <!-- /galLeftContent -->
        <%--START RIGHT (DESCRIPTION) WRAPPER--%>
        <div class="galRightContent">
            <asp:Panel ID="panelImageData" runat="server">
                <h2>
                    <asp:Label ID="labelImageTitle" Text="" runat="server" />
                </h2>
                <h3>
                    <asp:Label ID="labelImageLocation" Text="" runat="server" />
                </h3>
                <p>
                    <asp:Label ID="labelImageDescription" Text="" runat="server" />
                </p>
                <div class="galShareSection">
                    <telerik:RadRating runat="server" ID="ratingRateImage" ItemCount="5" Precision="Half"
                        AutoPostBack="true" OnRate="ratingRateImage_Rate" Skin="Metro">
                    </telerik:RadRating>
                    <asp:Label ID="labelImageRating" runat="server" CssClass="galRatingLabel" />
                    <telerik:RadSocialShare runat="server" ID="socialShareNetworkShare">
                        <MainButtons>
                            <telerik:RadSocialButton SocialNetType="ShareOnFacebook" />
                            <telerik:RadSocialButton SocialNetType="ShareOnTwitter" />
                            <telerik:RadSocialButton SocialNetType="GoogleBookmarks" />
                            <telerik:RadSocialButton SocialNetType="StumbleUpon" />
                        </MainButtons>
                    </telerik:RadSocialShare>
                    <p>
                        Image URL:
                    </p>
                    <telerik:RadTextBox ID="textBoxCopyUrl" runat="server" TextMode="MultiLine" Height="50px"
                        Width="235px">
                    </telerik:RadTextBox>
                    <%--BUTTON TO CLEAR SESSION DATA FOR RATINGS--%>
                    <%--<asp:Button ID="buttonClearSession" Text="clear session data for voting" OnClick="ClearVotingDataFromSession" runat="server" />--%>
                </div>
            </asp:Panel>
        </div>
        <telerik:RadCodeBlock runat="server" ID="codeBlockSetCopyUrl">
            <script type="text/javascript">

                var previousItem = null;
                function toggleSelectedItem(sender, args)
                {
                    var currentItem = args.get_item();
                    currentItem.toggleCssClass("rrSelectedItem");
                    if (previousItem) previousItem.toggleCssClass("rrSelectedItem");
                    previousItem = currentItem;
                }

                function selectInitialItem()
                {
                    Sys.Application.remove_load(selectInitialItem);

                    var imageListRotator = $find("<%=rotatorImagesList.ClientID %>");
                    var itemToSelect = imageListRotator.get_items()[indexToSelect];
                    itemToSelect.toggleCssClass("rrSelectedItem");
                    previousItem = itemToSelect;

                    var items = 7//the rotator holds 7 items by default
                    //change the paging of the rotator only if the image is after
                    //the middle of the first set
                    if (indexToSelect > Math.floor(items / 2))
                    {
                        //the currently shown set of images is 7
                        //this calculates which is the first image of the set that contains the image we need to preselect
                        //and sets it as the current item in the Rotator
                        var intexToSelect = Math.floor(indexToSelect / items) * items;
                        imageListRotator.set_currentItemIndex(intexToSelect);
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        <%--END RIGHT (DESCRIPTION) WRAPPER--%>
        <!-- /galRightContent -->
    </div>
    <%--END DETAILS PAGE WRAPPER--%>
    <!-- /galMainContent -->
    <div class="galPush">
    </div>
    <%--USED FOR POSITIONING THE FOOTER--%>
    <!-- /galPush -->
    </div>
    <%--CLOSE MAIN PAGE WRAPPER--%>
    <!-- /galWrapper -->
</asp:Content>
